<template>
  <div class="login">
    <van-icon
      name="music-o"
      size="50vw"
      color="rgb(219, 65, 65)"
      style="padding: 10vw 0;"
    />

    <van-form @submit="onSubmit">
      <van-field
        v-model="phoneNumber"
        name="phoneNumber"
        label="手机号"
        placeholder="请填写手机号"
        autofocus="true"
        :rules="[{ required: true }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="请填写密码"
        :rules="[{ required: true }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit"
          >登录</van-button
        >
      </div>
    </van-form>
    <van-button type="default" style="border: none" :to="{ name: 'register' }"
      >没有账号？立即注册</van-button
    >
    <h1 class="title">播放器</h1>
  </div>
</template>

<script>
import axios from "axios";
import { Dialog } from "vant";
export default {
  data() {
    return {
      phoneNumber: "",
      password: "",
    };
  },
  methods: {
    onSubmit() {
      axios
        .get(
          "http://localhost:3000/cellphone/existence/check?phone=" +
            this.phoneNumber
        )
        .then((res) => {
          if (res.data.exist == -1) {
            // 未注册
            Dialog.alert({
              message: "您的手机号还未注册,请先前往注册",
            });
            this.$router.push({
              name: "register",
            });
          } else {
            // 已注册,去登陆
            axios
              .get(
                "http://localhost:3000/login/cellphone?phone=" +
                  this.phoneNumber +
                  "&password=" +
                  this.password
              )
              .then((res) => {
                if (res.data.code == 200) {
                  // 登录成功,存储token
                  localStorage.setItem("token", res.data.token);
                  localStorage.setItem("phoneNumber", this.phoneNumber);
                  localStorage.setItem("password", this.password);
                  Dialog.alert({
                    message: "登录成功",
                  });
                  this.$router.push({
                    name: "successLogin",
                  });
                } else if (res.data.code == 502) {
                  // 登录失败,密码不正确
                  localStorage.removeItem("token");

                  Dialog.alert({
                    message: "请检查账号密码正确哟",
                  });
                } else if (res.data.code == 509) {
                  // 登录密码错误超过限制
                  localStorage.removeItem("token");

                  Dialog.alert({
                    message: "密码输入错误超过限制,请重新设置密码",
                  });
                }
                // console.log(res.data);
              });
          }
        });
    },
  },
};
</script>

<style scoped>
.login {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login .van-button--info {
  background: rgb(235, 30, 30);
  border: rgb(235, 30, 30);
}
.title {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  font-family: "华文行楷";
  font-weight: normal;
  color: rgb(126, 122, 121);
  font-size: 22px;
  line-height: 40px;
  text-align: center;
}
</style>
